<template>
  <div class="big">
    <van-nav-bar :title="gg.community" left-arrow @click-left="onClickLeft" />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in gg.houseImg" :key="index">
        <img v-lazy="'http://liufusong.top:8080' + image" />
      </van-swipe-item>
    </van-swipe>
    <div class="bbig">
      <div class="center">
        <p>{{ gg.title }}</p>
        <van-tag
          type="primary"
          v-for="(item, index) in gg.tags"
          :key="index * 100"
          >{{ item }}</van-tag
        >
      </div>
      <hr />
      <div class="zj">
        <van-row>
          <van-col span="8" class="top-text">{{ gg.price }}/月</van-col>
          <van-col span="8" class="top-text">{{ gg.roomType }}</van-col>
          <van-col span="8" class="top-text">{{ gg.size }}平米</van-col>
        </van-row>
        <van-row>
          <van-col span="8">租金</van-col>
          <van-col span="8">房型</van-col>
          <van-col span="8">面积</van-col>
        </van-row>
      </div>
      <hr />
      <van-row>
        <van-col span="12">装修：精装</van-col>
        <van-col span="12"
          >朝向：<span v-for="item in gg.oriented" :key="item + 10">{{
            item
          }}</span></van-col
        >
      </van-row>
      <van-row>
        <van-col span="12">楼层: </van-col>
        <van-col span="12">类型：普通住宅</van-col>
      </van-row>
    </div>
    <div class="bottom">
      <p>小区：{{ gg.community }}</p>
      <div id="container"></div>
      <span>房屋配套</span>
      <hr />
    </div>
    <div class="fygk">
      <p>房源概况</p>
      <hr />
    </div>
    <van-row class="bottom-btn">
      <van-col span="8" class="sc"><van-icon name="star-o" />收藏</van-col>
      <van-col span="8" class="sc">在线咨询</van-col>
      <van-col span="8" class="call">电话预约</van-col>
    </van-row>
  </div>
</template>

<script>
import { getzhu } from '@/api/article'
export default {
  async mounted() {
    const ah = await getzhu(this.$route.params.id)
    console.log(ah.body.coord)
    const { BMapGL } = window
    var map = new BMapGL.Map('container')
    var point = new BMapGL.Point(
      ah.body.coord.longitude - 0,
      ah.body.coord.latitude - 0
    )
    map.centerAndZoom(point, 15)
    var wz = new BMapGL.Point(
      ah.body.coord.longitude - 0,
      ah.body.coord.latitude - 0
    )
    var content = ah.body.community
    var label = new BMapGL.Label(content, {
      // 创建文本标注
      position: wz, // 设置标注的地理位置
      offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
    })
    label.setStyle({
      // 设置label的样式
      color: '#fff',
      backgroundColor: 'red',
      fontSize: '15px',
      border: '2px solid #1E90FF'
    })
    map.addOverlay(label) // 将标注添加到地图中
  },
  name: 'MyHousexq',
  components: {},
  props: {},
  data() {
    return {
      gg: ''
    }
  },
  computed: {},
  watch: {},
  async created() {
    console.log(this.$route.params.id)
    const zhu = await getzhu(this.$route.params.id)
    console.log(zhu)
    this.gg = zhu.body
    console.log(this.gg)
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
#container {
  height: 30vh;
}
.bottom-btn {
  text-align: center;
  position: fixed;
  top: 610px;
  left: 1px;
  .sc {
    background-color: white;
    z-index: 999999999999999999999999999999999;
  }
  .call {
    background-color: #21b97a;
    color: white;
  }
  ::v-deep .van-col {
    width: 33vw;
    border: 1px solid #ccc;
    height: 50px;
    line-height: 50px;
  }
}
.zj {
  text-align: center;
}
.bottom {
  background-color: white;
  margin-top: 20px;
  padding-top: 20px;
  height: 100px;
}
.bbig {
  background-color: white;
}
.big {
  background-color: #f6f5f6;
}
.top-text {
  color: red;
  font-weight: 700;
}
.van-col {
  margin: 10px 0;
}
.center {
  padding-left: 10px;
  padding-top: 20px;
  .van-tag {
    margin: 10px 0;
  }
}
img {
  width: 100vw;
  height: 250px;
}
::v-deep .van-nav-bar__title {
  color: white;
  font-weight: 500;
  font-size: 18px;
}
::v-deep .van-button {
  background-color: #21b97a;
  border: 1px solid #21b97a;
}
.van-nav-bar {
  background-color: #21b97a;
}
</style>
